<!-- 调解中心通话统计 -->
<template>
	<div id="teamAgentStatis">
		<p class="statis-title card">调解中心通话情况</p>
		<div class="statis">
			<div id="chartTop" class="card"></div>
			<div id="chartBottom" class="card"></div>
		</div>
	</div>
</template>
<script setup name="teamAgentStatis">
	import { onMounted, onUnmounted } from 'vue'
	import * as echarts from 'echarts'
	import biChartApi from '@/api/bi/biChartApi.js'
	import { throttle } from 'lodash'
	// ===========================================DATA======================================================
	let colorList = ['#2657D1', '#5794F7', '#1A3FBE', '#708CE1','#2A5CEA', '#96BAE4']//antdv色值
	let chartTopDom
	let chartBottomDom
	let mixChartTop
	let mixChartBottom
	let mixChartTopOption = ref({
		color: colorList,
		title: {
			text: '通话总量统计',
			textStyle: {
				color: '#fff',
				fontWeight: 400,
				fontSize: 16
			}
		},
		tooltip: {
			trigger: 'axis',
			backgroundColor: 'rgba(24, 35, 62, 0.9)',
			borderColor: '#1E4B9C',
			textStyle: {
				color: '#fff',
				align: 'left' // 文本左对齐
			}
		},
		grid: {
			top: '20%',
			left: '5%',
			right: '5%',
			bottom: '10%'
		},
		legend: {
			data: ['呼叫总数（个）', '接通总数（个）', '接通总时长（分钟）', '响铃总时长（分钟）'],
			textStyle: {
				color: '#fff'
			}
		},
		xAxis: [
			{
				type: 'category',
				data: ['职场1', '职场2', '职场3', '职场4', '职场5', '职场6', '职场7'],
				axisPointer: {
					type: 'shadow'
				},
				axisLabel: {
					// 轴标签样式
					color: '#fff'
				}
			}
		],
		yAxis: [
			{
				type: 'value',
				// name: '案件数量/件',
				// min: 0,
				// max: 250,
				// interval: 50,
				axisLabel: {
					// 轴标签样式
					color: '#fff',
					fontSize: 12,
					formatter: '{value}'
				},
				nameTextStyle: {
					// Y轴名称的样式
					color: '#ccc',
					padding: [0, 0, 0, 0] // 调整位置，防止文字遮挡
				},
				splitLine: {
					// 分割线样式
					lineStyle: {
						color: 'rgba(255,255,255,0.1)'
					}
				}
			},
			{
				type: 'value',
				// name: '时长/分钟',
				// min: 0,
				// max: 25,
				// interval: 5,
				axisLabel: {
					// 轴标签样式
					color: '#fff',
					formatter: '{value}'
				},
				nameTextStyle: {
					// Y轴名称的样式
					color: '#ccc',
					padding: [0, 0, 0, 0] // 调整位置，防止文字遮挡
				},
				splitLine: {
					// 分割线样式
					lineStyle: {
						color: 'rgba(255,255,255,0.1)'
					}
				}
			}
		],
		series: [
			{
				name: '呼叫总数（个）',
				type: 'bar',
				barMaxWidth: 40,
				data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
			},
			{
				name: '接通总数（个）',
				type: 'bar',
				barMaxWidth: 40,
				data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
			},
			// {
			// 	name: '接通率',
			// 	type: 'bar',
			// 	tooltip: {
			// 		valueFormatter: function (value) {
			// 			return value
			// 		}
			// 	},
			// 	data: [5.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
			// },
			{
				name: '接通总时长（分钟）',
				type: 'line',
				yAxisIndex: 1,
				showSymbol: false,
				data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
			},
			{
				name: '响铃总时长（分钟）',
				type: 'line',
				yAxisIndex: 1,
				showSymbol: false,
				data: [3.0, 4.2, 2.3, 2.5, 5.3, 4.2, 6.3, 23.4, 23.0, 16.5, 12.0, 6.2]
			}
		]
	})
	let mixChartBottomOption = ref({
		color: colorList,
		title: {
			text: '呼出调解统计',
			textStyle: {
				color: '#fff',
				fontWeight: 400,
				fontSize: 16
			}
		},
		tooltip: {
			trigger: 'axis',
			backgroundColor: 'rgba(24, 35, 62, 0.9)',
			borderColor: '#1E4B9C',
			textStyle: {
				color: '#fff',
				align: 'left' // 文本左对齐
			}
		},
		grid: {
			top: '20%',
			left: '5%',
			right: '5%',
			bottom: '10%'
		},
		legend: {
			data: ['呼出总数（个）', '接通总数（个）', '接通总时长（分钟）', '响铃总时长（分钟）'],
			textStyle: {
				color: '#fff'
			}
		},
		xAxis: [
			{
				type: 'category',
				data: ['职场1', '职场2', '职场3', '职场4', '职场5', '职场6', '职场7'],
				axisPointer: {
					type: 'shadow'
				},
				axisLabel: {
					// 轴标签样式
					color: '#fff'
				}
			}
		],
		yAxis: [
			{
				type: 'value',
				// name: '总数',
				// min: 0,
				// max: 250,
				// interval: 50,
				axisLabel: {
					formatter: '{value}'
				},
				axisLabel: {
					// 轴标签样式
					color: '#fff'
				},
				nameTextStyle: {
					// Y轴名称的样式
					color: '#fff',
					padding: [0, 0, 0, 0] // 调整位置，防止文字遮挡
				},
				splitLine: {
					// 分割线样式
					lineStyle: {
						color: 'rgba(255,255,255,0.1)'
					}
				}
			},
			{
				type: 'value',
				// name: '时长',
				// min: 0,
				// max: 25,
				// interval: 5,
				axisLabel: {
					formatter: '{value}'
				},
				axisLabel: {
					// 轴标签样式
					color: '#fff'
				},
				nameTextStyle: {
					// Y轴名称的样式
					color: '#fff',
					padding: [0, 0, 0, 0] // 调整位置，防止文字遮挡
				},
				splitLine: {
					// 分割线样式
					lineStyle: {
						color: 'rgba(255,255,255,0.1)'
					}
				}
			}
		],
		series: [
			{
				name: '呼出总数（个）',
				type: 'bar',
				barMaxWidth: 40,
				data: [10.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
			},
			{
				name: '接通总数（个）',
				type: 'bar',
				barMaxWidth: 40,
				data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
			},
			// {
			// 	name: '接通率',
			// 	type: 'bar',
			// 	tooltip: {
			// 		valueFormatter: function (value) {
			// 			return value
			// 		}
			// 	},
			// 	data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
			// },
			{
				name: '接通总时长（分钟）',
				type: 'line',
				yAxisIndex: 1,
				showSymbol: false,
				data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
			},
			{
				name: '响铃总时长（分钟）',
				type: 'line',
				yAxisIndex: 1,
				showSymbol: false,
				data: [3.0, 4.2, 2.3, 2.5, 5.3, 4.2, 6.3, 23.4, 23.0, 16.5, 12.0, 6.2]
			}
		]
	})
	// ===========================================WATCH=====================================================
	// ===========================================LIFECYCLE HOOKS===========================================
	onMounted(() => {
		setTimeout(async () => {
			chartTopDom = document.querySelector('#teamAgentStatis #chartTop')
			mixChartTop = echarts.init(chartTopDom)
			// mixChartTop.setOption(mixChartTopOption.value)
			chartBottomDom = document.querySelector('#teamAgentStatis #chartBottom')
			mixChartBottom = echarts.init(chartBottomDom)
			mixChartBottom.setOption(mixChartBottomOption.value)
			const biResult = await getData()
			// console.log('TEAM_AGENT_STATISTICS_DAY: ', biResult)
			//调解总量统计
			//以上假数据暂做保留以供测试
			mixChartTopOption.value.xAxis[0].data = []
			mixChartTopOption.value.series[0].data = []
			mixChartTopOption.value.series[1].data = []
			mixChartTopOption.value.series[2].data = []
			mixChartTopOption.value.series[3].data = []
			//真实数据赋值
			biResult.callTotalList.forEach((item, index) => {
				mixChartTopOption.value.xAxis[0].data.push(item.deptName) //调解中心
				mixChartTopOption.value.series[0].data.push(item.callTotal) //呼叫总数
				mixChartTopOption.value.series[1].data.push(item.callCompletionTotal) //接通总数
				mixChartTopOption.value.series[2].data.push(item.totalCallDuration) //响铃总时长
				mixChartTopOption.value.series[3].data.push(item.ringDuration) //接通总时长
			})
			//呼出调解统计
			mixChartBottomOption.value.xAxis[0].data = []
			mixChartBottomOption.value.series[0].data = []
			mixChartBottomOption.value.series[1].data = []
			mixChartBottomOption.value.series[2].data = []
			mixChartBottomOption.value.series[3].data = []
			biResult.callOutgoingList.forEach((item, index) => {
				mixChartBottomOption.value.xAxis[0].data.push(item.deptName) //调解中心
				mixChartBottomOption.value.series[0].data.push(item.callOutgoingTotal) //呼出总数
				mixChartBottomOption.value.series[1].data.push(item.callOutgoingCompletionTotal) //呼出接通总数
				mixChartBottomOption.value.series[2].data.push(item.totalCallOutgoingDuration) //呼出接通总时长
				mixChartBottomOption.value.series[3].data.push(item.callOutgoingRingDuration) //呼出响铃总时长
			})
			// 渲染图表
			mixChartTop.setOption(mixChartTopOption.value)
			mixChartBottom.setOption(mixChartBottomOption.value)
		}, 1000)
		// 自适应大小
		const teamAgentResize = throttle(() => {
			setTimeout(() => {
				mixChartTop && mixChartTop.resize()
				mixChartBottom && mixChartBottom.resize()
			}, 500)
		}, 200)
		window.addEventListener('resize', teamAgentResize)
	})
	// 组件卸载时清理
	onUnmounted(() => {
		window.removeEventListener('resize', teamAgentResize)
		mixChartTop?.dispose()
		mixChartBottom?.dispose()
	})
	// ===========================================METHODS==================================================
	// ===========================================REQUEST==================================================
	const getData = async () => {
		const res = await biChartApi.getResultByType('TEAM_AGENT_STATISTICS_DAY')
		return JSON.parse(res.biResult)
	}
</script>
<style lang="less" scoped>
	#teamAgentStatis {

		.statis-title {
			font-size: 20px;
			font-weight: 600;
			text-align: left;
			margin-bottom: 0;
			letter-spacing: 4px;
			line-height: 20px;
		}
		.statis {
			flex: 1;
			display: flex;
			flex-direction: column;
			> div {
				flex: 1;
			}
			> div:nth-child(1) {
				margin: 10px 0;
			}
		}
	}
</style>
